<template>
  <!-- 心愿墙页面 -->
  <div class="wish">
    <div class="open" @click="drawer = true" v-show="isWish">
      <a title="打开设置">
        <i class="el-icon-d-arrow-left"></i>
      </a>
    </div>
    <el-card>
      <div class="main_title">
        <h2 :class="[isWish?'active':'']" @click="cutWish(0)" title="再次点击我可以刷新哦">流动心愿</h2>/
        <h2 :class="[!isWish?'active':'']" @click="cutWish(1)" title="再次点击我可以刷新哦">心愿墙</h2>
      </div>
      <!-- 这里需要一张心愿背景图,暂时使用网络上图片 -->
      <div v-if="!isWish">
        <!-- 心愿墙获取到数据之后再显示 -->
        <div class="list">
          <div class="divide">
            <span class="title" :class="[isActive?'active':'']" @click="cutsort('time')">最新榜单</span>
            <span class="title" :class="[!isActive?'active':'']" @click="cutsort('heat')">热度心愿</span>
          </div>
          <WallTemplate :wallsData="wishdata" v-if="wishdata.length !== 0"></WallTemplate>
          <div v-else>正在努力加载数据</div>
        </div>
      </div>
      <!-- 显示流动弹幕 -->
      <div v-else>
        <vueDanmaku
          :danmus="danmus"
          :loop="true"
          ref="vueDanmaku"
          :channels="channels"
          :speeds="speeds"
          :use-slot="true"
        >
          <template slot="dm" slot-scope="{ danmu }">
            <!-- 弹幕插槽（vue 2.6.0 及以上版本可使用 v-slot:dm="{ index, danmu }"语法） -->
            <div
              :class="[fontColor?'setcolor':'']"
            >{{ danmu.nickname?danmu.nickname+'：':'' }}{{ danmu.message }}</div>
            <!-- 容器插槽 -->
            <div></div>
          </template>
        </vueDanmaku>
        <!-- 发送弹幕 -->
        <div class="send">
          <input type="text" v-model="sendmsg" placeholder="快来发送你的心愿" @keyup.enter="sendMsg" />
          <button @click="sendMsg">发送</button>
          <div class="playset">
            播放设置:
            <a @click="changeSet(0)">播放</a>
            <a @click="changeSet(1)">暂停</a>
            <a @click="changeSet(2)">关闭</a>
          </div>
        </div>
      </div>
      <!-- 抽屉效果 -->
      <el-drawer
        title="弹幕效果设置"
        :visible.sync="drawer"
        direction="rtl"
        :before-close="handleClose"
        :modal="modal"
      >
        <div class="set">
          <div class="item">
            弹幕行数:
            <a @click="changeRow(3)" :class="[channels===1?'active':'']">少</a>
            <a @click="changeRow(5)" :class="[channels===3?'active':'']">中</a>
            <a @click="changeRow(0)" :class="[channels===0?'active':'']">多</a>
          </div>
          <div class="item">
            弹幕速度:
            <a @click="changeSpeed(50)" :class="[speeds===50?'active':'']">慢</a>
            <a @click="changeSpeed(150)" :class="[speeds===200?'active':'']">中</a>
            <a @click="changeSpeed(300)" :class="[speeds===500?'active':'']">快</a>
          </div>
          <div class="item">
            字体颜色:
            <a @click="fontColor=false" :class="[!fontColor?'active':'']">white</a>
            <a @click="fontColor=true" :class="[fontColor?'active':'']">black</a>
          </div>
        </div>
      </el-drawer>
    </el-card>
  </div>
</template>

<script>
// 引入弹幕库
import vueDanmaku from "vue-danmaku";
// 引入第三方库dayjs
import dayjs from "dayjs";
// 引入子组件
import WallTemplate from "@/views/wall_template/index.vue";
// 引入封装计算滚动距离函数
import { getRollLength } from "@/schema/getRollLength";
export default {
  data() {
    return {
      danmus: [], //弹幕数据
      channels: 0, // 0表示最大行数
      speeds: 200, // 弹幕速度
      isWish: true, //心愿和弹幕的切换
      drawer: false, //抽屉的显示
      sendmsg: "", //发送的心愿信息
      fontColor: false, //true表示白色，默认false
      modal: false, //抽屉是否需要遮罩层
      isActive: true, //控制切换排序模块
      num: 0, //获取数据的开始值
      isWait: true, //控制是否需要等待请求
    };
  },
  methods: {
    // 修改弹幕行数函数
    changeRow(data) {
      this.channels = data;
    },
    // 控制弹幕速度函数
    changeSpeed(data) {
      this.speeds = data;
    },
    // 改变弹幕播放效果
    changeSet(data) {
      // 判断 0表示播放,1表示暂停,2表示关闭
      data === 0
        ? this.$refs.vueDanmaku.play()
        : data === 1
        ? this.$refs.vueDanmaku.pause()
        : this.$refs.vueDanmaku.stop();
    },
    // 切换心愿弹幕板块
    cutWish(data) {
      // 判断
      if (data === 0) {
        this.isWish = true;
        // 表示切换到流动弹幕
        this.getWishBarrage();
      } else if (data === 1) {
        this.isWish = false;
        // 通知vuex获取时间排序的心愿信息
        this.getwishdata();
      }
    },
    // 获取心愿弹幕数据回调
    async getWishBarrage() {
      let result = await this.$API.getwishbarrage();
      if (result.code === 200) {
        this.danmus = result.data;
      }
    },
    // 切换排序
    cutsort(sort) {
      this.num = 0; //重设开始值
      if (sort === "time") {
        this.isActive = true; // 切换时间排序
        this.getwishdata();
      } else if (sort === "heat") {
        this.isActive = false; // 切换热度排序
        this.getwishdataByheat();
      }
    },
    // 获取心愿墙时间数据列表回调
    getwishdata() {
      this.$store.dispatch("getwishdata", this.num).then((res) => {
        if (res.result) {
          // 恢复节流 可以继续请求
          this.isWait = true;
        } else {
          return this.$message(res.message);
        }
      });
    },
    // 获取心愿墙热度数据列表回调
    getwishdataByheat() {
      this.$store.dispatch("getwishdataByheat", this.num).then((res) => {
        if (res.result) {
          // 恢复节流 可以继续请求
          this.isWait = true;
        } else {
          return this.$message(res.message);
        }
      });
    },
    // 关闭抽屉回调
    handleClose(done) {
      done();
    },
    // 发送心愿弹幕回调
    async sendMsg() {
      // 判断发送内容是否为空或超过25字
      if (this.sendmsg.trim() === "" || this.sendmsg.length > 25) {
        return this.$message({
          type: "error",
          message: "发送内容为空或过长(超过25字)",
        });
      }
      let data = {
        message: this.sendmsg,
        timer: dayjs().format("YYYY-MM-DD HH:mm:ss"),
      };
      // 发送请求
      let result = await this.$API.publishwishdm(data);
      if (result.code === 200) {
        this.$refs.vueDanmaku.add(data);
      } else {
        this.$message({
          type: "error",
          message: result.message,
        });
      }
      // 清空
      this.sendmsg = "";
    },
    // 滚动事件回调
    handleScroll() {
      // 去判断是否触底
      let result = getRollLength();
      // 判断返回值是否为true
      if (result) {
        // 判断是否可以发起请求
        if (this.isWait) {
          this.num += 5;
          this.isWait = false;
          // 判断当前的模块，来获取不同数据
          if (this.isActive) {
            // 通知vuex获取时间排序的心愿信息
            this.getwishdata();
          } else {
            //热度排序
            this.getwishdataByheat();
          }
        }
      }
    },
  },
  mounted() {
    this.$message({
      type: "success",
      message: "谢谢你来看我,愿你心心如所愿，岁岁有所年,事事有所成",
    });
    // 获取心愿弹幕数据
    this.getWishBarrage();
  },
  created() {
    // 监听滚动事件
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    //页面离开后销毁监听事件
    window.removeEventListener("scroll", this.handleScroll);
  },
  components: {
    vueDanmaku,
    WallTemplate,
  },
  computed: {
    wishdata() {
      // 判断当前板块 返回不同排序的值
      if (this.isActive) {
        return this.$store.state.wish.wishdatatime;
      } else {
        return this.$store.state.wish.wishdataheat;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.wish {
  position: relative;
  padding-top: 10px;
  .open {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50% 0 0 50%;
    background: #fff;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    text-align: center;
    i {
      color: #008c8c;
      font-weight: 700;
      cursor: pointer;
    }
  }
  .el-card {
    width: 1000px;
    margin: 0 auto;
    .main_title {
      display: flex;
      justify-content: center;
      font-size: 16px;
      margin-bottom: 10px;
      h2 {
        color: #8590a6;
        margin: 0 5px;
        cursor: pointer;
      }
      .active {
        color: #008c8c;
        font-weight: 700;
      }
    }
    /deep/.el-drawer__header span {
      font-weight: 700;
      color: #008c8c;
    }
    .set {
      padding: 0 20px;
      .item {
        padding: 10px 0;
        color: #008c8c;
        min-width: 300px;
        display: flex;
        justify-content: start;
        a {
          cursor: pointer;
          margin: 0px 15px;
          display: inline-block;
        }
        a:hover {
          color: #008c8c;
          border-bottom: 1px solid #008c8c;
        }
        .active {
          color: #008c8c;
          border-bottom: 1px solid #008c8c;
          font-weight: 700;
        }
      }
    }
  }
  .vue-danmaku {
    width: 100%;
    height: 500px;
    background: url("../../assets/xinyuanbg.webp");
    background-size: 100% 100%;
    /deep/.move {
      color: #fff;
    }
  }
  .setcolor {
    color: #000;
  }
  .send {
    display: flex;
    justify-content: start;
    padding: 10px 20px 0;
    input {
      text-indent: 10px;
      width: 450px;
      border: 1px solid #008c8c;
      outline: none;
      height: 30px;
      line-height: 30px;
      border-radius: 10px;
      margin-right: 10px;
    }
    button {
      border: none;
      background: #008c8c;
      color: #fff;
      padding: 0 10px;
      height: 30px;
      line-height: 30px;
      border-radius: 10px;
      cursor: pointer;
    }
    .playset {
      line-height: 30px;
      margin-left: 100px;
      color: #008c8c;
      a {
        cursor: pointer;
        margin: 0px 15px;
        display: inline-block;
      }
      a:hover {
        color: #008c8c;
        border-bottom: 1px solid #008c8c;
      }
    }
  }
  .list {
    .divide {
      margin-bottom: 10px;
      padding-bottom: 5px;
      border-bottom: 1px solid #008c8c;
      .title {
        color: #8590a6;
        cursor: pointer;
        margin-right: 20px;
      }
      .active {
        font-weight: 700;
        color: #008c8c;
      }
      .title:hover {
        color: #008c8c;
      }
    }
  }
}
</style>